@import "../iconfont";
@import '~@alifd/theme-2786/dist/next.css';

.desktop{
  overflow: hidden;
}

.message_box_expand-enter {
  overflow: hidden;
}

.message_box_expand-enter-active {
  transition: right 0.2s ease-out;
}

.message_box_expand-leave {
  overflow: hidden;
}

.message_box_expand-leave-active {
  transition: right 0.2s ease-out;
}

.message_box{
  z-index: 9;
  .message_box_header{
    transition: background-color 0.2s ease-out;
    h2{
      font-size: 16px;
      padding: 20px 0 0 10px;
    }
    span{
      float: right;
      cursor: pointer;
      font-size: 12px;
      display: block;
      text-align: right;
      padding: 0 10px 6px 0;
    }
  }
  .message_box_content{
    ul{
      li{
        position:relative;
        transition: background-color 0.2s ease-out;
        padding:10px 12px 15px;
        margin-bottom: 3px;
        h3{
          font-weight: normal;
          font-size: 15px;
        }
        p{
          margin-top: 3px;
          font-size: 12px;
          line-height: 14px;
        }
        i{
          position: absolute;
          right: 15px;
          top:13px;
          cursor: pointer;
        }
      }
    }
  }
}

.start_menus{
  $menu_zIndex:1000;
  z-index: $menu_zIndex;
  color: #fff;
  .start_menus_logo{
    font-size: 34px;
    text-align: center;
    line-height: 40px;
    padding: 0 18px;
    cursor: pointer;
    &:hover{
      background-color: rgba(255,255,255,.1);
    }
  }
  .start_menus_win{
    z-index: $menu_zIndex + 1;
    width: 140px;
    height: 37px;
    border-bottom: 2px solid rgba(255,255,255,.6);
    cursor: pointer;
    margin-left: 2px;
    transition: background-color .3s ease-out;
    &:hover{
      background-color: rgba(255,255,255,.3)!important;
      .start_menus_win_box {
        i{
          visibility: visible;
        }
      }
    }
    &.active{
      background-color: rgba(255,255,255,.2);
    }
    .start_menus_win_box{
      width: 100%;
      padding: 0 10px;
      img{
        margin:auto 5px auto 0px;
        display: block;
        width: 24px;
        height: 24px;
      }
      h3{
        display: block;
        line-height: 37px;
        font-size: 12px;
      }
      i{
        display: block;
        position: absolute;
        top:3px;
        right: 5px;
        color: rgba(255,255,255,0.4);
        visibility: hidden;
        z-index: $menu_zIndex + 3;
        &:hover{
          color: rgba(255,255,255,0.8);
        }
      }
    }
    .start_menus_win_cover{
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: $menu_zIndex + 2;
    }
  }
  .data_time{
    height: 100%;
    font-size: 13px;
    padding: 4px 10px;
    text-align: center;
    &:hover{
      background-color: rgba(255,255,255,0.1);
    }
  }
  .start_menus_message{
    line-height: 40px;
    padding: 0 10px;
    i{
      font-size: 20px;
    }
    &:hover{
      cursor: pointer;
      background-color: rgba(255,255,255,0.1);
    }
  }
}

.start_box_expand-enter {
  overflow: hidden;
}

.start_box_expand-enter-active {
  transition: bottom 0.1s ease-out;
}

.start_box_expand-leave {
  overflow: hidden;
}

.start_box_expand-leave-active {
  transition: bottom 0.1s ease-out;
}
.start_box{
  $box_zIndex:1000;
  width: 854px;
  height: 370px;
  z-index: $box_zIndex + 1;
  .start_box_background{
    z-index: $box_zIndex;
  }
  .start_box_background_change_color{
    z-index: $box_zIndex + 1;
  }
  .start_box_left{
    z-index: $box_zIndex +3;
    padding: 40px 20px 20px 0px;
    .start_box_left_user{
      width: 140px;
      position: relative;
      .start_box_left_info{
        text-align: center;
        img{
          width: 50px;
          height: 50px;
        }
        h3{
          font-size: 14px;
        }
        p{
          font-size: 13px;
        }
      }
      .start_box_left_vip{
        margin-top: 10px;
        text-align: center;
        .start_box_left_vip_info{
          padding: 10px 0 0px 30px;
          font-size: 13px;
          overflow: hidden;
          i{
            margin-top: -4px;
            display: block;
            float: left;
            font-size: 21px;
          }
          span{
            display: block;
            float: left;
          }
        }
      }
      .start_box_left_operating{
        position: absolute;
        bottom:-12px;
        width: 100%;
        ul{
          li{
            padding: 0px 0px 0px 15px;
            >div{
              overflow: hidden;
              width: 30px;
              cursor: pointer;
            }
            i{
              display: block;
              font-size: 24px;
              float: left;
              margin-top: 0px;
            }
            span{
              float: left;
              display: block;
              margin-top: -8px;
              margin-left: 5px;
              font-size: 14px;
            }
          }
        }
      }
    }
    .start_box_left_menus{
      width: 180px;
      .next-menu{
        border:none!important;
        background-color: transparent!important;
        box-shadow: none!important;
        .next-nav-item{
          background-color: transparent;
          .next-menu-item-text{
            display: block;
            overflow: hidden;
            height: 40px;
            img{
              float: left;
              margin: 7px 8px 0 0;
              border-radius: 3px;
              line-height: 40px;
              width: 24px;
              height: 24px;
            }
          }
        }
      }
    }
  }
  .start_box_right{
    width: 100%;
    z-index: $box_zIndex +3;
    .start_box_right_header{
      h2{
        padding: 14px 0;
        font-size: 18px;
      }
    }
    .start_box_right_content{
      height: 100%;
      padding-right: 10px;
      .start_box_application{
        position: relative;
        height:120px;
        cursor: pointer;
        background-color: rgba(255,255,255,0.1);
        &:hover{
          .start_box_application_hover{
            visibility: visible;
          }
        }
        img{
          width: 100%;
          height: 100%;
        }
        h4{
          position: absolute;
          bottom: -5px;
          left: 5px;
          font-size: 12px;
        }
        .start_box_application_hover{
          width: 100%;
          height: 100%;
          position: absolute;
          top:0;
          border: 2px solid rgba(255,255,255,0.5);
          visibility: hidden;
        }
      }
    }
  }
  .start_box_cover{
    position:absolute;
    width:100%;
    height:calc(100% + 37px);
    z-index:$box_zIndex;
  }
}

.desktop_apps{
  justify-content:flex-start; //项目在主轴上的对齐方式
  align-items:flex-start; //交叉轴对齐方式
  flex-wrap:wrap;
  align-content: flex-start;//多根轴线对齐方式
  width: 100%;
  .desktop_app{
    text-align: center;
    margin: 3px 12px 0 0;
    cursor: pointer;
    transition: background-color 0.3s ease-out;
    &:hover{
      background-color: rgba(255,255,255,0.3);
    }
    img{
      border-radius: 3px;
    }
    h3{
      font-family: "Microsoft YaHei";
      margin-bottom: 2px;
      padding: 0 3px;
      width: 100%;
      line-height: 17px;
      height: 34px;
      font-weight: normal;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .small_logo{
    padding: 2px 0 0;
    width: 45px;
    img{
      height: 35px;
      width: 35px;
    }
  }
  .middle_logo{

    padding: 3px 0 0;
    width: 60px;
    img{
      height: 50px;
      width: 50px;
    }
  }
  .large_logo{
    padding: 7px 0 0;
    width: 75px;
    img{
      height: 65px;
      width: 65px;
    }
  }
}

.next-loading-wrap{
  height: 100%;
}
.apps_list_set_content{
  font-size: 12px;
  padding: 3px 10px;
  ul{
    li{
      padding: 2px 18px;
      cursor: pointer;
    }
  }
}
.apps_list_set{
  transition: transform ease-out 0.3s;
  &.rotation{
    transform: rotate(180deg);
  }
}